<template>
  <view class="cu-card article bg-white margin radius-lg solid-bottom">
    <view class="cu-item">
      <view class="content justify-between">
        <view>
          <view class="flex flex-sub margin-top-xs justify-between align-center">
            <MrAvatar :src="articleItem.avatar" :size="80"></MrAvatar>
            <view class="flex flex-sub flex-direction margin-left-xs">
              <text class="text-df text-bold">{{ articleItem.username }}</text>
              <view class="text-gray text-sm ">
                {{ articleItem.createTime }}
              </view>
            </view>
          </view>
          <text class="text-black text-bold text-xxl text-cut-2 padding-left-xs padding-top">{{ articleItem.title }}</text>
          <view class="flex margin-top">
            <view class="text-gray text-df">
              <text class="cuIcon-attentionfill margin-lr-xs"></text>
              浏览{{ articleItem.viewCount }}
              <text v-if="articleItem.isLike===1" class="cuIcon-appreciatefill margin-lr-xs"
                    style="color: orange"></text>
              <text v-else class="cuIcon-attentionfill margin-lr-xs"></text>
              赞{{ articleItem.likeCount }}
              <text class="cuIcon-messagefill margin-lr-xs"></text>
              评论{{ articleItem.commentCount || ' ' }}
            </view>
          </view>
        </view>
        <view class="margin-top-xs">
          <MrImage :src="articleItem.coverImage" :height="180" :width="180"></MrImage>
        </view>
      </view>

    </view>
  </view>
</template>

<script setup lang="ts">

import {defineProps} from "vue";
import MrAvatar from "@/components/common/MrAvatar.vue";
import MrImage from "@/components/common/MrImage.vue";

const props = defineProps({
  articleItem: {
    type: Object,
    default: {}
  }
})


</script>

<style scoped>

</style>